import React from 'react';
import { Table, Popconfirm, Button, Modal } from 'antd';

class TableView extends React.Component {
    state = {
        dataSource: [],
        total: 0,
        openModalState: false
    }

    componentDidMount = () => {
        const data = [];
        for (let i = 1; i <= 46; i++) {
            data.push({
                key: i,
                name: `小白 ${i}`,
                age: Math.ceil(Math.random() * 10) + 20,
                sex: Math.ceil(Math.random() * 10) > 5 ? '男' : '女',
                address: `山西太原市小店区 ${i}`,
            });
        }
        this.setState({
            dataSource: data,
            total: 46
        })

    }

    columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            width: 120,
            render: (_, record) => (
                <Popconfirm title="确定要删除吗?" >
                    <a href='/#'>Delete {record.name}</a>
                </Popconfirm>
            )

        }
    ];
    handerPageChange = (page, pageSize) => {
        console.log(page, pageSize);
    }
    handleAdd = () => {
        this.setState({
            openModalState: true
        })
    }
    handleCancel = () => {
        this.setState({
            openModalState: false
        })
    }
    render() {
        return (
            <>
                <Button
                    onClick={this.handleAdd}
                    type="primary"
                    style={{
                        margin: 10,
                    }}
                >
                    Add a row
                </Button>
                <Modal
                    title="添加"
                    onCancel={this.handleCancel}
                    open={this.state.openModalState}
                >
                    <p>ssssssssssssssss</p>
                </Modal>

                <Table
                    dataSource={this.state.dataSource}
                    columns={this.columns}
                    // loading={true}
                    pagination={{
                        // position: ["topRight", "bottomLeft"],
                        position: ["bottomRight"],
                        defaultPageSize: 10,  //默认的每页条数
                        onChange: this.handerPageChange,
                        hideOnSinglePage: true,  //只有一页时是否隐藏分页器
                        total: this.state.total, //显示一共有多少条数据
                        showTotal: total => `共 ${total} 条`, //格式化共有数据
                        showSizeChanger: true,  //显示每页多少条的下拉框
                        showQuickJumper: true,  //显示跳转到多少页

                    }}
                />
            </>
        )
    }
}

export default TableView